Un primer acercamiento a las cadenas es viendo qué propiedades conparten con los arrays y las colecciones de objetos de JavaScript. Pero teniendo claro que NO SON ARRAYS, y que las cadenas tienen sus propios métodos y propiedades.
El comportamiento similar a los arrays permite usar estructuras de bucle para trabajar con cada valor de la cadena. En el siguiente ejemplo pasamos cada caracter del input a un elemento span del documento, con cada evento input sobre el campo de texto. Además reemplaza los espacios por guiones en la salida de datos.
function desglosaCadena() {
let txt_span = '';
let cadena = document.querySelector('#txt1').value;
for(let i = 0; i < cadena.length; i++) {
let caracter = cadena[i];
if(caracter == ' ') {
caracter = '-';
}
txt_span += '<span>' + caracter + '</span>'
}
document.querySelector('.salida1').innerHTML = txt_span;
}
document.querySelector('#txt1').oninput = desglosaCadena;
Este método es la equivalencia al acceso al carácter por propiedad (usando los corchetes), y es más recomendable que el anterior, especialment por la forma de tratar las cadenas vacías.
Por ejemplo, dado este texto:
let vacio ='';
console.log(vacio.charAt(0));
console.log(vacio[0]);
El método charAt()devuelve una cadena vacía, lo que permite seguir usando la variable en el código, mientras que el acceso por propiedad devuelve el valor undefined, que puede provocar un error con el uso de esa variable
En el ejemplo anterior podemos reemplazar la línea let caracter = cadena[i]; por el método let caracter = cadena.charAt(i);, y el resultado será el mismo.
Este método devuelve el código de carácter en base UTF-16 del carácter en la posición indicada
su código UTF-16 es:
function leeCaracter() {
let caracter = document.querySelector('#txt2').value;
let codigo = '';
for (let posicion = 0; posicion < caracter.length; posicion++) {
codigo += caracter.charCodeAt(posicion) + '-';
}
document.querySelector('.salida2').textContent = codigo ;
}
document.querySelector('#txt2').oninput = leeCaracter;
El primero devuelve la posición de una cadena dentro de otra (la primera cadena puede contener una o más letras) como valor numérico sobre índice de base cero.
Si no usamos un segundo parámetro, el método empieza por el primer caracter de la cadena en la que buscamos y devuelve la primera ocurrencia de la cadena buscada.
Este método diferencia entre mayúsculas y minúsculas y devuelve el valor -1 cuando no encuentra la cadena buscada.
Ejemplo:
let indice = 'Esto es una cadena';
console.log(indice.indexOf('e')); => Devuelve 5
console.log(indice.indexOf('E')); => Devuelve 0
console.log(indice.indexOf('una')); => Devuelve 8
console.log(indice.indexOf('unas')); => Devuelve -1
Este método acepta un segundo parámetro que indique a partir de qué posición debe empezar a buscar la cadena, empezando siempre desde la izquierda.
let indice = 'Esto es una cadena';
console.log(indice.indexOf('e', 6)); => Devuelve 15
El método lastIndexOf() permite encontrar la última aparición de un elemento en una cadena, y con el segundo parámetro podemos hacer que realice la búsqueda en dirección inversa (del final al principio).
let indice = 'Esto es una cadena';
console.log(indice.lastIndexOf('e')); => Devuelve 15
console.log(indice.lastIndexOf('e',14)); => Devuelve 5
console.log(indice.lastIndexOf('f')); => Devuelve -1
Existe el método search() que hace un trabajo parecido a indexOf(), devolviendo la posición de la cadena dentro de la principal. La diferencia es que search no admite el segundo parámetro, y que con search si podemos usar expresiones regulares para buscar patrones de texto, que es algo que indexOf no permite.
Son métodos que convierten toda la cadena en mayúsculas o minúsculas respectivamente.
Tanto en estos métodos como en el resto que veamos y que producen cambios sobre los carateres, esos cambios no aefctan a la variable almacenada, sino a su salida calculada. Para hacerlos persistentes hay que almacenar el resultado del método en una nueva variable (o sobreescribir la variable inicial con el resultado del método)
let indice = 'Esto Es Una Cadena';
console.log(indice.toLowerCase()) => Muestra todo el texto en minúsculas, pero la variable no ha cambiado.
console.log(indice) => Seguirá mostrando 'Esto Es Una Cadena'
indice = indice.toLowerCase(); => reemplazamos el contenido de la variable por su versión en minúsculas
console.log(indice) => mostrará todo el texto en minúsculas
Tenemos 3 métodos que trabajan de forma similar para obtener un fragmento de una cadena a partir de otra, pero con diferencias que pueden resultar útiles en cada caso:
Obtiene el texto dado entre posición inicial y posición final de la cadena, que son los dos parámetros que puede recibir el método. Hay que notar que la posición final no está incluida en la cadena devuelta.
En caso de no incluir el segundo parámetro, devuelve el resto de la cadena desde la posición del primer parámetro hasta el final.
let ejemplo = 'Esto Es Una Cadena';
console.log(ejemplo.slice(8,11)); => Devuelve Una
console.log(ejemplo.slice(8)); => Devuelve Una Cadena
El método admite valores nega tivos en los parámetros que permiten que la cuenta se realice en sentido inverso, desde el final de la cadena al principio.
console.log(ejemplo.slice(-13,-11)); => Devuelve Es
En este caso, si queremos incluir la última letra de la cadena hay que indicar solamente el primer parámetro, y dejar en blanco el segundo, pues este siempre tiene que ser un número menor que cero.
Este método es muy parecido al anterior, pero no admite valores negativos para los parámetros. Y de igual forma que el anterior, si omitimos el segundo, devolverá toda la cadena desde la posición indicada por el primero.
Este método trabaja de forma similar al primero, pero el segundo parámetro indica la cantidad de caracteres a extraer en lugar de la posición final a extraer.
También admite que el primer parámetro sea un valor negativo, y en ese caso cuenta desde el final, y apartir de ahí comienza a extraer caracteres.
let ejemplo = 'Esto Es Una Cadena';
console.log(ejemplo.substr(8,3)) => Devuelve Una;
console.log(ejemplo.substr(8)) => Devuelve Una Cadena;
console.log(ejemplo.substr(-13,2)) => Devuelve Es;
console.log(ejemplo.substr(-10)) => Devuelve Una Cadena;
Son métodos para sustituir un bloque de texto por otro en una cadena. El primero reemplaza la primera aparcición del elemento buscado, y no sigue reemplazando. Y el segundo realiza todos los cambios que coincidan con la cadena buscada.
Son métodos que diferencian entre mayúsculas y minúsculas
let ejemplo = 'Esto Es Una Cadena y Una Frase';
let cambio = ejemplo.replace('Una', 'Otra'); => Devuelve Esto Es Otra Cadena y Una Frase
let guiones = ejemplo.replaceAll(' ','-'); => Devueve Esto-Es-Una-Cadena-y-Una-Frase
Es unn métdo que quita todos los espacios que tengamos al principio y al final de una cadena de texto.
let ejemplo = ' Esto Es Una Cadena ';
let cambio = ejemplo.trim() => Devuelve Esto Es Una Cadena
Son métodos que sirven para igualar la longitud de las cadenas de texto añadiendo caracteres de relleno al principio o al final del texto.
let ejemplo = '7';
let cambio = ejemplo.padStart(4,0); => Devuelve 0007
let cambio = ejemplo.padStart(4,'-'); => Devuelve ---7
let ejemplo = '70';
let cambio = ejemplo.padStart(4,0); => Devuelve 0070
let cambio = ejemplo.padStart(4,'-'); => Devuelve --70
let ejemplo = '7';
let cambio = ejemplo.padEnd(4,0); => Devuelve 7000
let cambio = ejemplo.padEnd(4,'-'); => Devuelve 7---
let ejemplo = '70';
let cambio = ejemplo.padEnd(4,0); => Devuelve 7000
let cambio = ejemplo.padEnd(4,'-'); => Devuelve 70--
Este método transforma el tipo de datos de la cadena a un array en el cual podemos usar cualquiera de los caracteres de la cadena como elemento separador de cada uno de los valores del array. Es muy útil cuando recibimos datos de texto organizados con comas, puntos y coma o espacios dentro de una misma variable.
El argumento separador puede omitirse o ser una cadena de longitud cero, y entonces el array resultante es distinto. Pero si lo usamos, cada aparición del caracter separador en la cadena deja de formar parte de los datos transformados en array, y los valores de este se extraen de los caracteres entre separadores.
let ejemplo = '7-8-3-6-9';
let cambio = ejemplo.split('-') => Devuelve [7,8,3,6,9]
Las comas son el indicador de separación dentro del array, pero no forman parte del dato devuelto.
Pero si usamos el método con separador cadena vacía ('') entonces cada carácter de la cadena inicial se convierte en un elemento distinto del array
let ejemplo = '7-8-3-6-9';
let cambio = ejemplo.split('') => Devuelve [7,-,8,-,3,-,6,-,9]
Si usamos el espacio como elemento separador de cadena, obtenemos un array donde cada elemento es cada una de las palabras que forman la cadena
let ejemplo = 'Convierte cada palabra';
let cambio = ejemplo.split(' '); => ['Convierte','cada','palabra']
Si lo usamos sin cadena separadora
let ejemplo = 'Convierte cada letra';
let cambio = ejemplo.split(''); => ['C','o','n','v','i','e','r','t','e',' ','c','a','d','a',' ','l','e','t','r','a']
Si usamos el método sin indicar separador entonces toda la cadena ocupa la primera posición del array
let ejemplo = 'Convierte cada letra';
let cambio = ejemplo.split(); => ['Convierte cada letra']